<template>
  <div class="mod-sys__user">
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="getList()">
      <el-form-item label="工号">
        <el-input v-model="state.dataForm.userName" placeholder="工号" clearable></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="state.dataForm.realName" placeholder="姓名" clearable></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="getList()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          v-if="state.hasPermission('sys:user:save')"
          type="primary"
          @click="addOrUpdateHandle()"
        >新增</el-button>
      </el-form-item>
    </el-form>
    <TableWrapper
      :valueData="pageList"
      :columns="columns"
      :optrations="admin ? optrations : ''"
      @pageSize="pageSize"
      @currentPage="currentPage"
      :pageCurrent="{...pageCurrent,total}"
    >
      <template #gender="{ row }">{{ state.getDictLabel("gender", row.gender) }}</template>
    </TableWrapper>
    <add-or-update ref="addOrUpdateRef" @refreshDataList="getList()"></add-or-update>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, ref, toRefs, onMounted } from "vue";
import TableWrapper from "@/components/table/TableWrapper.vue";
import AddOrUpdate from "./user-add-or-update.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import baseService from "@/service/baseService";
const view = reactive({
  getDataListIsPage: true,
  deleteURL: "/sys/user",
  deleteIsBatch: true
});
const pageList = ref([]);
const state = reactive({ ...useView(view), ...toRefs(view) });

const admin = ref(state.hasPermission("cam:admin"));
const total = ref("0");
const pageCurrent = reactive({
  pageNum: "1",
  pageSize: 20
});
const columns = ref([
  {
    value: "userName",
    label: "工号"
  },
  {
    value: "realName",
    label: "姓名"
  },
  {
    value: "gender",
    label: "性别"
  },
  {
    value: "mobile",
    label: "联系方式"
  }
]);
const optrations = [
  {
    name: "编辑",
    type: "primary",
    icon: "el-icon-plus",
    method: (columns, row) => {
      addOrUpdateHandle(row);
    },
    disabled: false
  },
   {
    name: "删除",
    type: "danger",
    icon: "el-icon-plus",
    method: async (columns, row) => {
      await state.deleteHandle(row.id);
      getList();
    },
    disabled: false
  }
];

const getList = () => {
  let param = {
    ...pageCurrent,
    query: {
      userName: state.dataForm.userName,
      realName: state.dataForm.realName
    }
  };
  baseService
    .post("/cam/user/pageTeacher", param)
    .then((res) => {
      if (res.code === 0) {
        pageList.value = res.data.records;
        total.value = res.data.total;
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch(() => {});
};
const pageSize = (val) => {
  pageCurrent.pageSize = val;
  getList();
};
const currentPage = (val) => {
  pageCurrent.pageNum = val;
  getList();
};

onMounted(() => {
  getList();
});

const addOrUpdateRef = ref();
const addOrUpdateHandle = (row?: object) => {
  addOrUpdateRef.value.init(row);
};
</script>